<template>
  <!-- 建立详情 -->
  <div class="resume-main">
    <i class="corner"></i>
    <div style="display: flex; flex-direction: column; flex: 1;overflow-y: auto">
      <div class="info">
        <div class="title">
          <i class="icon icon-resume"></i>
          <span>简历</span>
        </div>
        <div class="main clearfix">
          <div class="content">
            <div class="item">
              <p>姓名：{{data.name}}</p>
            </div>
            <div class="item">
              <p>性别：{{data.gender}}</p>
            </div>
            <div class="item">
              <p>最高学历：{{data.highestEducation}}</p>
            </div>
            <div class="item">
              <p>工作年限：{{data.workingLife}}</p>
            </div>
            <div class="item">
              <p>所在地：{{data.address}}</p>
            </div>
            <div class="item">
              <p>年龄：{{data.age}}</p>
            </div>
            <div class="item">
              <p class="text-nowrap">邮箱：
                {{data.email}}
              </p>
              <i class="icon icon-contact-email"></i>  
            </div>
            <div class="item">
              <p class="text-nowrap">手机号：
                {{data.mobile}}
              </p>
              <i class="icon icon-contact-mobile"></i>  
            </div>
            <div class="item">
              <p class="text-nowrap">微信：
                {{data.wx}}  
              </p>
              <i class="icon icon-contact-wx"></i>  
            </div>
            <div class="item">
              <p class="text-nowrap">最近工作单位/年限：{{data.lastCompany}} / {{data.workingLife}}</p>
            </div>
            <div class="item inline">
              <p>锁定状态：<span class="cor-orange">{{data.interviewStatus}}</span></p>
            </div>
            <div class="item inline">
              <p>
                <span class="label">标签：</span>
                <span class="value">
                  <i class="tag" v-for="item in data.tags">{{item}}</i>
                  <i class="icon tag-add"></i>
                </span>
              </p>
            </div>
          </div>
          <div class="head">
            <img :src="data.head" alt="" width="98" height="122">
            <p>最近更新：{{data.currentUpdateManage}}</p>
            <p>跟新时间：{{data.currentUpdateTime}}</p>
          </div>
        </div>
      </div>
      <div class="detail">
        <el-tabs v-model="tabs" type="card">
          <el-tab-pane name="1" label="简历内容">
            <div class="pt-20">
              <div class="detail__block">
                <div class="time-line">
                  <span>求职意向</span>
                  <i class="icon icon-resume-p"></i>
                </div>
                <div class="box">
                  <el-row :gutter="10">
                    <el-col :span="8" class="item">
                      <p>到岗时间：{{data.postTime}}</p>
                    </el-col>
                    <el-col :span="8" class="item">
                      <p>工作地点：{{data.workAddress}}</p>
                    </el-col>
                    <el-col :span="8" class="item">
                      <p>期望月薪：{{data.salary}}</p>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <div class="detail__block">
                <div class="time-line">
                  <span>工作经历</span>
                  <i class="icon icon-resume-f"></i>
                </div>
                <div class="box">
                  
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="2" label="简历附件">
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
            简历附件<br>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    
    <div class="panel">
      <div class="panel-switch" @click="panelVisible = !panelVisible">
        <div class="panel-switch__label" v-if="!panelVisible">
          <i class="el-icon-arrow-down"></i>
          <span>展开</span> 
        </div> 
        <div class="panel-switch__label" v-else>
          <i class="el-icon-arrow-up"></i>
          <span>收起</span> 
        </div> 
      </div>
      <transition name="el-zoom-in-bottom">
        <div class="panel-box" v-show="panelVisible">
          <ui-button size="mini" type="lightblue">推荐给面试官</ui-button>
          <ui-button size="mini" type="green">锁定并安排面试</ui-button>
          <ui-button size="mini" type="gray">放弃</ui-button>
          <ui-button size="mini" type="lightblue">简历释放后提醒我</ui-button>
          <ui-button size="mini" type="lightblue">推荐</ui-button>
          <ui-button size="mini" type="lightblue">收藏</ui-button>
          <ui-button size="mini" type="lightblue">下载附件</ui-button>
          <ui-button size="mini" type="lightblue">下一份简历</ui-button>
          <ui-button size="mini" type="gray">关闭</ui-button>
          <ui-button size="mini" type="lightblue">沟通记录</ui-button>
          <ui-button size="mini" type="lightblue">编辑简历</ui-button>
          <ui-button size="mini" type="lightblue">放入黑名单</ui-button>
          <ui-button size="mini" type="lightblue">运营平台</ui-button>
          <ui-button size="mini" type="lightblue">下载当前页</ui-button>
          <ui-button size="mini" type="lightblue">打印</ui-button>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import {Tabs, TabPane, Row, Col, Button} from 'element-ui'
  export default {
    components: {
      [Tabs.name]: Tabs,
      [TabPane.name]: TabPane,
      [Row.name]: Row,
      [Col.name]: Col,
      [Button.name]: Button,
    },
    data () {
      return {
        data: {},
        tabs: '1',
        panelVisible: false,
        panelText: '收起'
      }
    },
    created() {
      this.getDetail()
    },
    methods: {
      getDetail() {
        this.data = {
          id: 1, //id
          head: 'https://apic.douyucdn.cn/upload/avatar/003/92/16/12_avatar_middle.jpg', //头像
          isCollection: false, //是否收藏
          name: 'Marco', //姓名
          companyName: '腾讯', //公司名
          resume: '高级开发工程师-9年', //简历
          project: 'S3精兵强将', //项目
          address: '厦门',
          currentUpdateManage: 'Bole',
          currentUpdateTime: '2018-08-02',
          status: '新晋候选人', //状态
          dynamic: { //动态
            watch: 3,
            notice: 1,
          }, 
          isRead: true, //是否已阅读
          readTime: '2018-11-11', //阅读时间
          mobile: 13000000000, //联系方式
          contact: { //联系TA
            wx: true,
            mobile: true,
            email: true,
          }, 
          age: '14',
          wx: '1324215',
          email: 'marcomarco@163.com',
          source: '自己录入', //来源渠道
          lastCompany: '腾讯', //上家公司
          workingLife: 1, //工作年限
          gender: '男', //性别
          highestEducation: '本科', //最高学历
          academy: '北京大学', //毕业院校
          tags: ['厦门大学', '北京'], //标签
          interviewStatus: '【面试中】 招聘经理：nicolebao',
          postTime: '2018-12-22', //到岗时间
          workAddress: '上海',
          salary: '16000',
        }
      },
    }
  }
</script>

